<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="addClass">添加</el-button>
            <el-button type="default" plain @click="allDel">批量删除</el-button>
            <el-button type="default" plain @click="allImport">一键导入</el-button>
        </div>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">图片名称：</span>
                <el-input placeholder="输入图片名称搜索" v-model.trim="search_text" clearable></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @selection-change="handleAllSelected"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column label="图片名称" min-width="300" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.photo + '!img_400'" fit="cover" v-if="row.photo" />
                        <div class="table-lr__right line-two">
                            {{ row.tag }}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="album_name" min-width="200" label="所属分类"></el-table-column>
            <el-table-column prop="created_at_label" label="上传时间" width="220"></el-table-column>
            <el-table-column label="操作" width="240" class-name="operation-nav" fixed="right">
                <template #default="scope">
                    <el-button class="theme-btn" type="primary" link @click="clickEdit(scope.row)">编辑 </el-button>
                    <el-popconfirm :persistent="false" title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(scope.row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 编辑 -->
        <el-dialog v-model="dialogEdit" title="编辑图片" width="560px" :append-to-body="true" :destroy-on-close="true">
            <div class="edit-box">
                <div class="edit-item">
                    <p>图片名称：</p>
                    <el-input placeholder="输入图片名称" v-model.trim="img_name" clearable></el-input>
                </div>
                <el-button type="primary" @click="confirmEdit">确认</el-button>
            </div>
        </el-dialog>

        <!-- 图片库 -->
        <picture-library :show="showImg" :foot-bth="false" @close="closeLibrary" @select="selectImg"></picture-library>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, search_text, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: search_text.value,
        album_id: 0,
    }
    getdata("design/index", params)
}

/**
 * 添加图片
 * @property {Boolean} showImg 显示图片库
 * @property {Function} addClass 显示图库
 * @property {Function} selectImg 图库中已选择的图片
 * @property {Function} closeLibrary 关闭图库
 */
const showImg = ref(false)
const addClass = () => {
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    pubParams(getList)
}
const closeLibrary = () => {
    showImg.value = false
    pubParams(getList)
}

/**
 * 编辑图片
 * @property {Boolean} dialogEdit 编辑弹窗状态
 * @property {String} img_name 图片名称
 * @property {String} photo_id 图片ID
 * @property {Function} confirmEdit 确认编辑
 */
const img_name = ref("")
const photo_id = ref("")
const dialogEdit = ref(false)
const clickEdit = (row) => {
    img_name.value = row.tag
    photo_id.value = row.photo_id
    dialogEdit.value = true
}
const confirmEdit = () => {
    if (img_name.value == "") {
        proxy.$message({ message: "请输入图片名称", type: "warning" })
        return
    }
    proxy.$axios
        .post("design/editImg", {
            photo_id: photo_id.value,
            title: img_name.value,
        })
        .then((res) => {
            dialogEdit.value = false
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 删除单个
const clickDel = (row) => {
    postDel(row.photo_id)
}
// 删除多个
const ids = ref([])
const handleAllSelected = (val) => {
    let arrs = []
    for (let i = 0; i < val.length; i++) {
        arrs.push(val[i].photo_id)
    }
    ids.value = arrs
}
const allDel = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要删除的数据", type: "warning" })
        return
    }
    postDel(ids.value)
}
// 删除接口
function postDel(params) {
    proxy.$axios
        .post("design/delImg", {
            photo_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 一键导入
const allImport = () => {
    proxy
        .$confirm("一键导入会覆盖已有的图片库，确定要覆盖吗？", "温馨提示", {
            type: "warning",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
        })
        .then(() => {
            proxy.$axios
                .post("design/importImg")
                .then((res) => {
                    if (res.data.code == 0) {
                        pubRefreshParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {})
        })
        .catch(() => {})
}
</script>
<script>
export default {
    name: "PictureList",
}
</script>

<style lang="less" scoped>
.good-logo {
    width: 80px;
    height: 80px;
    border-radius: @radius-xs;
}

.edit-box {
    padding: @padding-sm @padding-mdl;

    .edit-item {
        display: flex;
        align-items: center;
        font-size: @font-size-md;
        color: @gray-8;
        margin-bottom: @margin-xl;

        p {
            flex: none;
            text-align: right;
            padding-right: @padding-xs;
        }
    }

    .el-button {
        margin-left: 78px;
    }
}
</style>
